<template>
	<div class="h5template">
		<top></top>
		<div class="center">
			<left></left>
			<div class="right">
        <div class="where">当前位置：分销后台>自定义H5下单页</div>
        <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
        <div class="Title">{{title}}模板自定义</div>
				<div class="content" v-loading="loading">
				  <div class="h5">
					  <van-image fit="contain" src="../../../static/img/top_banner_defult375.png" width="375" height="274" />
					  <template v-for="item in componentImstances">
						<div @click="actionchange(item,$event)">
						  <component :ref="item.type" :is="item.instance" :data="item.data" />
						</div>
					  </template>
				  </div>
				  <template v-for="item in moduleList">
					  <div class="setting-box" :style="{'margin-top':mt}" v-if="item.type==action">
						  <div @click="upgrade"><img src="../../../static/img/up_icon.png"></div>
						  <div class="down" @click="degrade"><img src="../../../static/img/up_icon.png"></div>
					  </div>
				  </template>
				  <div class="params" :style="{'margin-top':mt}">
					<template v-for="item in moduleList">
						<div v-if="item.type==action">
						  <template v-if="item.type=='form-first'">
							  <div class="title">身份证信息设置
								<el-checkbox v-model="item.data.changeStatus">启用</el-checkbox>
							  </div>
							<div class="mg10">
								<el-checkbox v-model="item.data.TLA">国政通效验（付费）</el-checkbox>
							</div>
							<div class="mg10">
								<el-checkbox v-model="item.data.oneToFive">联通一证五户（付费）</el-checkbox>
							</div>
							<div class="mg10">
								<el-checkbox v-model="item.data.canHave" @change="canNum">同一证件信息最大下单数量</el-checkbox>
								<el-input v-model="item.data.num" :disabled="!item.data.canHave" onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入下单数量"></el-input>
							</div>
						  </template>
						  <template v-if="item.type=='form-second'">
							  <div class="title">收货信息设置
								<el-checkbox v-model="item.data.changeStatus">启用</el-checkbox>
							  </div>
							  <div class="mg10">
								<el-checkbox v-model="item.data.getPerson">收货人使用身份证姓名</el-checkbox>
							  </div>
							  <div class="mg10">
							  	<el-checkbox v-model="item.data.getCode">联系电话验证码效验（付费）</el-checkbox>
							  </div>
							  <div class="mg10">
							  	<el-checkbox v-model="item.data.mobileHave" @change="mobileNum">同一联系电话最大下单数量</el-checkbox>
							  	<el-input v-model="item.data.num" :disabled="!item.data.mobileHave" onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入下单数量"></el-input>
							  </div>
								<div class="mg10">
									地址排除：
									<el-cascader
										ref="select"
										@change="getvalue"
									    :options="options"
										separator="-"
									    :props="{ checkStrictly: true }"
									    clearable></el-cascader>
								  <el-button type="primary" @click="exclude">排除</el-button>
								</div>
								<div class="mg10">
									已排除地址：
									<el-tag
									  :key="tag.value"
									  v-for="tag in excludeList"
									  closable
									  :disable-transitions="false"
									  @close="handleClose(tag)">
									  {{tag.label}}
									</el-tag>
								</div>
						  </template>
						  <template v-if="item.type=='form-third'">
							  <div class="title no-borer">身份证照片模块
								<el-checkbox v-model="item.data.changeStatus">启用</el-checkbox>
							  </div>
						  </template>
<!--							<div class="footbtn">-->
<!--								<el-button @click="sendParms">保存</el-button>-->
<!--							</div>-->
						</div>
					</template>
				  </div>

				</div>
        <div class="footbtn" style="background: #4444441f; padding: 20px 0; display: flex; justify-content: center;" >
          <el-button type="primary" @click="sendParms">发布</el-button>
        </div>
			</div>
		</div>

		<foot></foot>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	import h5top from '@/components/h5components/top.vue'

	import province_city  from '@/components/h5components/province_city'
	import defaultData  from '@/components/h5components/defaultData'

	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot,
			h5top
			},
		name: 'h5template',
		data(){
			return{
        loading: false,
				topImage: '../../../static/img/top_banner_defult375.png',
				moduleList: [],
				action: 'form-first',
				options: province_city,
				value: '',
				valueLabel: '',
				excludeList: [],
				excludeCode: [],
				mt: '275px',
        id: '',
        title: ''
			}
		},
		mounted() {
			this.$nextTick(()=>{
				setTimeout(()=>{
					this.setBox()
				},800)
			})
		},
		computed: {
			componentImstances() {
				let {moduleList} = this;

				return moduleList.map(item => {
				  item.instance = () => import(`@/components/h5components/${item.type}`)
				  return item;
				});
			}
		},
		created() {
		  var that = this
      this.loading = true
      this.id = this.$route.query.id
      this.title = this.$route.query.title
      let url = `https://static.91haoka.cn/${this.id}.json`
      //let url = `/storage/static/${this.id}.json`
      axios.get(url)
        .then((res) => {
          if(res.data.msg.code == 0){
            that.moduleList = res.data
            that.loading = false
            for(let i=0;i < that.moduleList.length;++i){
              if(that.moduleList[i].data.active){
                that.action = that.moduleList[i].type
              }
              if(this.moduleList[i].type == 'form-second'){
                that.excludeList = that.moduleList[i].data.excludeList
                that.excludeCode = that.moduleList[i].data.excludeCode
              }
            }
          }else{
            that.moduleList = defaultData
            that.loading = false
          }

        })
        .catch((err)=> {
          that.moduleList = defaultData
          that.loading = false
          for(let i=0;i < that.moduleList.length;++i){
          	if(that.moduleList[i].data.active){
              that.action = that.moduleList[i].type
          	}
          	if(that.moduleList[i].type == 'form-second'){
              that.excludeList = that.moduleList[i].data.excludeList
              that.excludeCode = that.moduleList[i].data.excludeCode
          	}
          }
      })
			// this.moduleList = defaultData

		},
		methods:{
			getvalue(e){
				this.valueLabel = this.$refs.select[0].getCheckedNodes()[0] ? this.$refs.select[0].getCheckedNodes()[0].pathLabels.join('-') : ''
				this.value = this.$refs.select[0].getCheckedNodes()[0] ? this.$refs.select[0].getCheckedNodes()[0].value : ''
			},
			sendParms(){

				let { moduleList,excludeList,excludeCode } = this;
				let data = JSON.parse(JSON.stringify(moduleList))
				for(let i in moduleList){
					switch(moduleList[i].type){
						case 'form-first':
							if(moduleList[i].data.canHave && moduleList[i].data.num < 1){
								this.$message.error('同一证件信息最大下单数量不能小于1')
								return
							}else{
                data[i].data.num = data[i].data.num ? parseInt(data[i].data.num) : ''
              }
						break
						case 'form-second':
							if(moduleList[i].data.mobileHave && moduleList[i].data.num < 1){
								this.$message.error('同一联系电话最大下单数量不能小于1')
								return
							}else{
                data[i].data.num = data[i].data.num ? parseInt(data[i].data.num) : ''
              }
						break
					}
				}
				data.map(item => {
				  delete item.instance
				  if(item.type === 'form-second'){
					item.data.excludeList = excludeList
					item.data.excludeCode = excludeCode
				  }
				  return item;
				});
				console.log(data,JSON.stringify(data));
        var that = this
				axios.post('/api/plan-market/json/set',{
          id: this.id,
          json: data
        }).then((res)=>{
          console.log(res.data);
          if(res.data.msg.code == 0){
            that.$message.success('发布成功，请在“在售商品管理”的“推广连接”中复制自定义下单页链接使用。')
            that.$router.push({
              path:'/productionDelivery'
            })
          }else{
            that.$message.error(res.data.msg.info)
          }
        })
			},

			exclude() {
				let {options,value,valueLabel} = this
				console.log(value);
				console.log(this.excludeList.indexOf(valueLabel));
				if(!value || !valueLabel){
					this.$message.error('请选择要排除的地区')
					return
				}
				if( this.excludeList.indexOf(valueLabel) !== -1 || this.excludeCode.indexOf(value) !== -1){
					this.$message.error('该地区已排除')
					return
				}
				let o = {value:value,label: valueLabel}
				this.excludeList.push(o)
				this.excludeCode.push(value)
				// console.log(this.excludeList);
			},
			handleClose(tag) {
				this.excludeList.splice(this.excludeList.indexOf(tag), 1);
				this.excludeCode.splice(this.excludeCode.indexOf(tag.value), 1);
				console.log(tag.value);
			},
			mobileNum(e){
				let { moduleList } = this;
				for(let i in moduleList){
					if(moduleList[i].type == 'form-second'){
						moduleList[i].data.num = moduleList[i].data.mobileHave ? moduleList[i].data.num : ''
						break
					}
				}
			},
			canNum(e){
				let { moduleList } = this;
				for(let i in moduleList){
					if(moduleList[i].type == 'form-first'){
						moduleList[i].data.num = moduleList[i].data.canHave ? moduleList[i].data.num : ''
						break
					}
				}
			},
			postion(event){
				let DOM = event.currentTarget;
				// 获取节点距离浏览器视口的高度
				let top = DOM.getBoundingClientRect().top;
				// 获取滚动条滚动距离
				let scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
				// 两个top相加就是节点真正的top值
				this.mt = top+scrollTop-242 + 'px';
			},
			actionchange(item,e){
				this.postion(e)
				this.action = item.type
				let { moduleList,action } = this
				for(let i=0;i < moduleList.length;++i){
					if(moduleList[i].type == action){
						moduleList[i].data.active = true
					}else{
						moduleList[i].data.active = false
					}
				}
			},
			setBox(){
				let { action } = this
				this.mt = this.$refs[action][0].$refs.active.offsetTop-242+'px'
			},
			upgrade() {
				let { moduleList,action } = this
				for(let i=0;i < moduleList.length;++i){
					if(moduleList[i].type == action){
						const data = moduleList[i]
						if(i==0){break}
						moduleList.splice(i, 1);
						moduleList.splice(i-1, 0, data);
						break
					}
				}
			  setTimeout(()=>{
				this.setBox()
			  },0)
			},
			degrade() {
				let { moduleList,action } = this
				for(let i=0;i < moduleList.length;++i){
					if(moduleList[i].type == action){
						const data = moduleList[i]
						moduleList.splice(i, 1);
						moduleList.splice(i+1, 0, data);
						break
					}
				}
				setTimeout(()=>{
					this.setBox()
				},0)
			},
		}
	}
</script>

<style lang="scss" scoped>

	.h5template{
		margin: 0; padding: 0; background: #EFEFEF;

		.center{ width: 1366px; margin: 0 auto; display: flex; justify-content: space-between;
			.right{ flex-basis: 1166px; background: #FFF;
      .Title {
        border-bottom: 1px solid #eaeaea;
        line-height: 45px;
        padding-left: 30px;
        font-size: 16px;
        background: #f9f9f9;
        color: #727272;
      }
				.content{
					display: flex;background: #4444441f;padding: 20px;font-size: 14px;color: #919191;
					.h5{
						background: #F2F2F2;width: 375px;height: fit-content;color: rgba(93,93,93,1);display: flex;flex-direction: column;
						.van-cell--clickable:active{background-color: inherit;}
						.van-button:active::before{opacity: 0;}
						.no-active{border: 1px dashed rgba(64, 253, 255, 0);}
						.active{border: 1px dashed #77A0FF;}/*40fdff*/
						.compon-title{padding: 15px 13px;}
						.idCard{
							height:633.3px;background:rgba(255,255,255,1);padding: 19.44px;
							display: flex;justify-content: center;align-items: center;flex-direction: column;justify-content: space-between;
							.surface{
								width:100%;
								height:194.44px;
								background:rgba(255,255,255,1);
								border: 1px solid #99999959;
								border-radius: 4px;
								color: #969799;
								display: flex;justify-content: center;align-items: center;
							}
						}
					}
					.setting-box{
						display: flex;flex-direction: column;justify-content: space-between;margin-left: 6px;height: 50px;padding: 10px 6px;background-color: #fff;
						.blue-color{ color: #409EFF}
						.down{transform: rotate(180deg);}
					}
					.params{ background: #FFF;margin-left: 8px;padding: 0 10px;width: 350px;height: fit-content;
						.title{
							padding: 10px 0;border-bottom: 1px solid #E5E5E5;
							display: flex;justify-content: space-between;
						}
						.no-borer{border:none}
						.mg10{margin: 14px 0;}
						.el-button {padding: 10px 20px;}
						.el-input__icon{line-height: 36px;}
						.el-input{width: 120px;font-size: 14px;}
						.el-input.el-input--suffix{width: 200px;}
						.el-tag{margin-bottom: 10px;}
						.el-tag + .el-tag {
						    margin-left: 10px;
						}
						.button-new-tag {
						    margin-left: 10px;
						    height: 32px;
						    line-height: 30px;
						    padding-top: 0;
						    padding-bottom: 0;
						}
						.input-new-tag {
						    width: 90px;
						    margin-left: 10px;
						    vertical-align: bottom;
						}
						.footbtn{display: flex;justify-content: flex-end;padding: 10px 0;border-top: 1px solid #E5E5E5;}
					}
				}
			}
		}

	}
</style>
